<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>考勤组设置</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-cache/no-store" />
	<!--[if IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/icheck.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" type="text/css" href="static/element-ui/theme-chalk/index.css" />
	<link rel="stylesheet" type="text/css" href="vueSystem/components/css/deptTransfer.css" />
	<style>
		.input-text {
			width: 140px;
		}

		li {
			float: left;
		}
		table,table tr { 
			border:1px solid #DCDCDC; 
		}
		#participantModal #vueApp {
			background: #ffffff;
			height: 85%;
		}

		#vueApp .modal-body {
			height: calc(100% - 106px);
			overflow: auto;
		}

		#vueApp .dept-transfer {
			height: calc(100% - 40px);
		}

		#participant .participantDiv {
			border: 1px solid #e4e4e4;
			border-radius: 4px;
			padding: 2px 8px;
			margin: 0;
			cursor: pointer;
			overflow: auto;
			font-size: 12px;
			display: inline;
		}

		#participant .participantDiv .participantItem {
			display: inline-block;
			padding: 0 8px;
			border-radius: 4px;
			margin-right: 8px;
			cursor: pointer;
		}
	</style>
	<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>

<body>
	<div>
		<div style="margin-left:10px; margin-top:10px;">
			<button class="btn btn-secondary-outline radius" onclick="window.history.back();">返回</button>
		</div>
		<div style="margin-left:10px;margin-right:5px;margin-top:20px; display:inline;">
			<label title="考勤组名称">考勤组名称：</label>
		</div>
		<div style="margin-left:10px;margin-right:5px; display:inline;">
			<input style="border-radius: 4px;" id="groupName" class="input-text" type="text" value="" placeholder="请输入考勤组名称">
		</div>
	</div>
	<div style="margin-top:10px;">
		<div style="margin-left:10px;margin-right:10px; display:inline;">
			<label title="参与考勤人员">参与考勤人员：</label>
		</div>
		<div id="participant" style="margin-left:10px;margin-right:10px; display:inline;">
			<button id="participantBtn" class="btn btn-secondary-outline radius">请选择</button>
		</div>
	</div>
	<div style="margin-top:10px;">
		<div style="margin-left:10px;margin-right:10px; display:inline;">
			<label title="参与考勤人员">考勤组负责人：</label>
		</div>
		<div id="leader" style="margin-left:10px;margin-right:10px; display:inline;">
			<button id="leaderBtn" class="btn btn-secondary-outline radius">请选择</button>
		</div>
	</div>
	<div style="position: relative;margin-left: 0;margin-right: 0;margin-top:10px;height: auto;display: block;">
		<div style="vertical-align:top; display: inline-block;width: 8.33333333%; margin-left:35px;">
			<lable style="font-size: 14px;text-align: right;line-height: 32px;white-space: nowrap; ">考勤类型：</lable>
		</div>
		<div id="" style="display: inline-block;font-size: 12px;">
			<lable style="position: relative;white-space: nowrap;cursor: pointer;">
				<input type="radio" id="radio-1" name="radio" checked/>
				<span>固定班制 (每天考勤时间一样)</span>
				<p style="color: #bbb;">适用于：IT、金融、文化传媒、政府/事业单位、教育培训等行业</p>
			</lable>
			<!-- 排班制与自由工时暂设为不可用 -->
			<!-- 			<lable style="position: relative;white-space: nowrap;cursor: pointer;"> -->
			<!-- 				<input type="radio" id="radio-2" name="radio" disabled>  -->
			<!-- 				<span>排班制 (自定义设置考勤时间)</span> -->
			<!-- 				<p style="color: #bbb;">适用于：餐饮、制造、物流贸易、客户服务、医院等行业</p> -->
			<!-- 			</lable> -->
			<!-- 			<lable style="position: relative;white-space: nowrap;cursor: pointer;"> -->
			<!-- 				<input type="radio" id="radio-3" name="radio" disabled> -->
			<!-- 				<span>自由工时(不设置班次，随时打卡)</span> -->
			<!-- 				<p style="color: #bbb;"> 适用于：班次没有规律，装修，家政，物流等计算工作时长的行业</p> -->
			<!-- 			</lable> -->
		</div>
	</div>
	<!-- 固定班制工作日设置 -->
	<div style="margin-left:10px;font-size: 12px;">
		<div>
			<div style="display: block;width: 8.33333333%;float: left;position: relative;text-align: right;vertical-align: middle;">
				<label class="" title="工作日设置">工作日设置：</label>
			</div>
			<div style="margin: 0;padding: 0; font-size:12px;float: left;position: relative;width: 58.33333333%;">
				快捷班次设置：
				<span id="quickClass">休息</span>
				<a class="selectClass" style="margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
				<div>
					<table>
						<colgroup>
							<col>
							<col style="width: 70px; min-width: 70px;">
							<col style="width: 300px; min-width: 300px;">
							<col style="width: 120px; min-width: 120px;">
						</colgroup>
						<thead>
							<tr>
								<th>
									<span>
										<div style="margin: 0;padding: 0;text-align: center;font-weight: 500;">
											<label>
												<span>
													<input id="selectAll" name="mychk" value="" type="checkbox" disabled>
													<span></span>
												</span>
											</label>
										</div>
									</span>
								</th>
								<th>
									<span>工作日</span>
								</th>
								<th>
									<span>班次时间段</span>
								</th>
								<th>
									<span>操作</span>
								</th>
							</tr>
						</thead>
						<tbody id="selectTable">
							<tr>
								<!-- 周一 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input name="mychk" value="monday" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;">周一</span>
								</td>
								<td id="monday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="monday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
							<tr>
								<!-- 周二 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input value="tuesday" name="mychk" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;font-size: 12px;">周二</span>
								</td>
								<td id="tuesday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="tuesday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
							<tr>
								<!-- 周三 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input value="wednesday" name="mychk" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;font-size: 12px;">周三</span>
								</td>
								<td id="wednesday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="wednesday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
							<tr>
								<!-- 周四 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input value="thursday" name="mychk" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;font-size: 12px;">周四</span>
								</td>
								<td id="thursday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="thursday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
							<tr>
								<!-- 周五 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input value="friday" name="mychk" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;font-size: 12px;">周五</span>
								</td>
								<td id="friday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="friday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
							<tr>
								<!-- 周六 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input value="saturday" name="mychk" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;font-size: 12px;">周六</span>
								</td>
								<td id="saturday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="saturday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
							<tr>
								<!-- 周日 -->
								<td style="text-align: center;">
									<span>
										<label>
											<span>
												<input value="sunday" name="mychk" type="checkbox">
												<span></span>
											</span>
										</label>
									</span>
								</td>
								<td>
									<span style="padding-left: 0px;font-size: 12px;font-size: 12px;">周日</span>
								</td>
								<td id="sunday" style="padding: 6px 8px;font-size: 12px;">休息</td>
								<td>
									<a class="selectClass" value="sunday" style="font-size: 12px;margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 手动按月排班 -->
			<div style="margin-top: 20px;padding: 0; font-size:12px;float: left;position: relative;width: 58.33333333%;">
				<div style="padding-left:50px;display: block;width: 8.33333333%;float: left;position: relative;">
					<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
				</div>
				<div style="margin: 0;padding: 0; font-size:12px;float: left;position: relative;width: 58.33333333%;">
					<input id="manualPlan" type="checkbox"/> 手动按月排班（设置过的月份会覆盖上面的按周排班）
					<div id="datePickDiv" style="float: left; margin:10px 10px 10px 10px;" hidden>
						<input id="datePick" name="datePick" type="text" class="input-text Wdate" style="width:160px;" placeholder="请选择要排班的月份" 
										onfocus="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false,readOnly:true,Mchanged:dateChanged,ychanged:dateChanged})"/>
					</div>
					<div id="monthlyClassSetDiv" style="margin:10px 10px 10px 10px;" hidden>
						<div style="clear:both;">
							快捷班次设置：
							<span id="monthlycheckQucik">休息</span>
							<a name='edit' value='-1' style="margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改班次</a>
						</div>
						<table id="monthlyClassSetTable" style="border-collapse: collapse;width:450px;">
							<thead>
								<tr><th>全选<input name="checkAll" id="monthlycheckAll" type="checkbox" disabled="disabled" /></th><th>日期</th><th>考勤时间</th><th>操作</th></tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="clear:both;margin-left:10px;">
		<div style="display: block;width: 8.33333333%;float: left;position: relative;text-align: right;vertical-align: middle;">
			<label title="个性化设置">个性化设置：</label>
		</div>
		<div id="customize" style="margin-left:10px;margin-right:10px; display:inline;">
			<div style="margin: 0;padding: 0; font-size:12px;float: left;position: relative;width: 58.33333333%;">
				上班打卡提醒：<select id="punchInAlert" style="font-size:12px;width:85px;">
								<option value='-1'>关闭</option>
								<option value='5'>提前5分钟</option>
								<option value='10' selected="selected">提前10分钟</option>
								<option value='15'>提前15分钟</option>
								<option value='20'>提前20分钟</option>
								<option value='30'>提前30分钟</option>
							</select>
			</div>
			<div style="margin: 0;padding: 0; font-size:12px;float: left;position: relative;width: 58.33333333%;">
				下班打卡提醒：<select id="punchOutAlert" style="font-size:12px;width:85px;">
								<option value='-1'>关闭</option>
								<option value='1' selected="selected">延迟1分钟</option>
								<option value='5'>延迟5分钟</option>
								<option value='10'>延迟10分钟</option>
								<option value='15'>延迟15分钟</option>
								<option value='20'>延迟20分钟</option>
								<option value='30'>延迟30分钟</option>
							</select>
			</div>
		</div>
	</div>
	<div style="clear:both;margin-left:10px;margin-top:10px;">
		<div style="display: block;width: 8.33333333%;float: left;position: relative;text-align: right;vertical-align: middle;">
			<label title="加班规则">加班规则：</label>
		</div>
		<div id="overtimeRuleDiv" style="margin-top:10px;margin-left:10px;margin-right:10px; display:inline;">
			<div style="margin: 0;padding: 0; font-size:12px;float: left;position: relative;width: 58.33333333%;">
				<span id="ruleNameSpan">未设置 </span>
				<a id="changeOvertimeRule" style="margin-left: 10px;color: #38adff;background: transparent;text-decoration: none;outline: none;cursor: pointer;">更改</a>
			</div>
		</div>
	</div>
	<!-- 保存设置按钮 -->
	<div style="margin: 24px 0px;clear:both;">
		<div style="margin-left: 33.33333333%;display: block;width: 66.66666667%;">
			<button id="save" type="button" class="btn btn-primary save-btn" style="border-radius: 4px;">
				<span>保存设置</span>
			</button>
		</div>
	</div>
	<!-- 选择部门与人员模态框 -->
	<div id="participantModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="participantModalLabel" aria-hidden="true">
		<div class="modal-dialog" id="vueApp" v-loading.fullscreen.lock="loading">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h2 class="modal-title" id="participantModalLabel" style="text-align:center; font-size: 16px;color: #363636;padding: 14px 0px;">选择部门与人员</h2>
			</div>
			<div class="modal-body">
				<div v-if="isShow" style="height:100%">
					<dept-transfer ref="peopleSelect" v-if="persons!==null" v-model="selectData" :persons="persons" :mode="mode"></dept-transfer>
					<div style="text-align:center;margin-top:10px;">
						<el-button type="primary" size="small" @click="ensure">确定</el-button>
						<el-button size="small" @click="closeModal">取消</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 选择班次模态框 -->
	<div id="selectClassModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="selectClassModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- 内容 -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h2 class="modal-title" id="selectClassModalLabel" style="font-size: 16px;color: #363636;padding: 14px 0px;">选择班次</h2>
				</div>
				<div class="modal-body">
					<!-- 动态加载班次信息 -->
					<div id="selectClassDiv" style="margin: 0;padding: 0;font-size: 12px;">
						<table id="selectClassTable">
							<thead style="line-height: 1.5;color: rgba(0,0,0,.65);border-collapse: separate;border-spacing: 0;text-align: left;">
								<tr>
									<th onselectstart="return false;">&nbsp;&nbsp;&nbsp;&nbsp;</th>
									<th>班次名称</th>
									<th>考勤时间</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
				<div class="modal-footer" style="margin-top:30px;padding: 20px 0px;text-align: center;">
					<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
					<button id="confirm" type="button" class="btn btn-primary" value="">确 认</button>
					<button id="update" type="button" class="btn btn-primary" style="display:none;">修 改</button>
				</div>
			</div>
		</div>
	</div>
	<div id="overtimeRuleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="overtimeRuleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- 内容 -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h2 class="modal-title" id="overtimeRuleModalLabel" style="font-size: 16px;color: #363636;padding: 14px 0px;">选择加班规则</h2>
				</div>
				<div class="modal-body">
					<div id="selectOvertimeRuleDiv" style="margin: 0;padding: 0;font-size: 12px;">
						<table id="selectOvertimeRuleTable">
							<thead>
								<tr>
									<th onselectstart="return false;">&nbsp;&nbsp;&nbsp;&nbsp;</th>
									<th>加班规则名称</th>
									<th>规则内容</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer" style="margin-top:30px;padding: 20px 0px;text-align: center;">
					<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
					<button id="overtimeRuleConfirm" type="button" class="btn btn-primary" value="">确 认</button>
				</div>
			</div>
		</div>
	</div>


	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20180810145355jquery.min1.9.1.js"></script>
	<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20180810150731H-ui.min3.0.2.js"></script>
	<script type="text/javascript" src="static/h-ui/js/jquery.icheck.min.js"></script>
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20180813175723jquery.dataTables1.10.0.js"></script>
	<script type="text/javascript" src="lib/datatables/1.10.0/dataTables.fixedColumns.min.js"></script>
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20190514110446vue.min.v2.6.10.js"></script>
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20191112090556element-ui2.11.1(revised).js"></script>
	<script type="text/javascript" src="vueSystem/js/request.js"></script>
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20180809103833lodash.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="https://upload.shinehao.com.cn/20180810172341echarts.common.min3.4.0.js"></script>
	<script type="text/javascript" src="vueSystem/js/sysUtil.js"></script>
	<script type="text/javascript" src="vueSystem/components/deptTransfer.js"></script>
	<script type="text/javascript" src="myJs/echartUtil.js"></script>
	<script type="text/javascript" src="myJs/util.js"></script>
	<script type="text/javascript" src="myJs/groupSet.js"></script>
</body>

</html>